<template>
    <div class="result">
        <div class="icon">
            <slot name="icon">
                <img v-if="props.status" :src="IconConfig[props.status]" alt="" />
            </slot>
        </div>
        <div class="title" v-if="props.title">{{ props.title }}</div>
        <div class="desc" v-if="props.desc">{{ props.desc }}</div>
        <div class="extra">
            <slot name="extra">
                <el-button v-if="props.btnText" type="primary" @click="handleClick">{{ props.btnText }}</el-button>
            </slot>
        </div>
    </div>
</template>

<script lang="ts" setup>
import ImgSuccess from "@/assets/icons/success.png";
import ImgError from "@/assets/icons/error.png";
import ImgWarning from "@/assets/icons/warning.png";
import ImgInfo from "@/assets/icons/info.png";
import ImgNotFound from "@/assets/icons/404.png";

const IconConfig = {
    success: ImgSuccess,
    error: ImgError,
    warning: ImgWarning,
    info: ImgInfo,
    "404": ImgNotFound,
};

type Props = {
    status?: keyof typeof IconConfig;
    title?: string;
    desc?: string;
    btnText?: string;
};

type Emits = {
    (e: "extraClick"): void;
};

const emits = defineEmits<Emits>();
const props = withDefaults(defineProps<Props>(), { status: "info" });

const handleClick = () => emits("extraClick");
</script>

<style lang="scss" scoped>
.result {
    display: flex;
    flex-direction: column;
    align-items: center;
    .icon {
        margin-bottom: 24px;
        img {
            display: block;
        }
    }
    .title {
        line-height: 30px;
        font-size: 20px;
        color: var(--el-text-color-regular);
        text-align: center;
    }
    .desc {
        line-height: 22px;
        color: var(--el-text-color-primary);
        font-size: 14px;
        text-align: center;
        margin-top: 12px;
    }
    .extra {
        &:not(:empty) {
            text-align: center;
            margin: 24px 0 0;
        }
    }
}
</style>
